<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 缩放的Line
 * @LastEditTime: 2021-11-24 16:16:50
 * @FilePath: \tianjushi-kanban\src\components\charts\InverseBar3.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import {
  onMounted,
  toRefs,
  ref,
  reactive,
  watch,
  computed,
  nextTick,
  version,
} from "vue";
import { resetChartStyle, showLoading, hexToRgba } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartdata: {
      type: Array,
      default: [
        {
          name: "A",
          value: 612.5,
        },
        {
          name: "B",
          value: 512.5,
        },
        {
          name: "C",
          value: 412.5,
        },
        {
          name: "D",
          value: 312.5,
        },
        {
          name: "E",
          value: 212.5,
        },
        {
          name: "D",
          value: 312.5,
        },
        {
          name: "E",
          value: 212.5,
        },
        {
          name: "D",
          value: 312.5,
        },
        {
          name: "E",
          value: 212.5,
        },
      ],
    },
    color: {
      default: ["#40cbe8", "#3afbc2"],
      type: Number,
    },
    fontSize: {
      default: 18,
      type: Number,
    },
    unit: {
      default: "unit",
      type: String,
    },
    max: {
      default: 1000,
      type: Number,
    },
    barWidth: {
      default: 45,
      type: Number,
    },

    grid: {
      default: [0, 100, 0, 100],
      type: Number,
    },
  },
  setup: function (props, context) {
    let chartInstance = null; //折线不能用响应式接收echart
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(chartInstance);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });
    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {
      let getmydmc = [];
      let getmyd = [];
      props.chartdata.forEach((v) => {
        getmydmc.push(v.name);
        getmyd.push(v.value);
      });

      let getmydzd = [];

      let big = 0;
      getmyd.forEach((el) => {
        if (!(el === undefined || el === "")) {
          if (big < Number(el)) {
            big = Number(el);
          }
        }
      });
      for (let i = 0; i < getmyd.length; i++) {
        getmydzd.push(big * 4);
      }
      //计算最大值
      function calMax(arr) {
        let max = 0;
        arr.forEach((el) => {
          el.forEach((el1) => {
            if (!(el1 === undefined || el1 === "")) {
              if (max < Number(el1)) {
                max = Number(el1);
              }
            }
          });
        });
        let maxint = Math.ceil(max / 9.5);
        //不让最高的值超过最上面的刻度
        let maxval = maxint * 10;
        //让显示的刻度是整数
        return maxval;
      }

      let max = Math.ceil(calMax([getmyd]) / 10) * 10;
      const option = {
        grid: {
          left: "3%",
          right: "5%",
          bottom: "5%",
          top: "0%",
          containLabel: true,
        },
        tooltip: {
          formatter: (params) => {
            if (params.name !== "") {
              return params.name + " : " + getmyd[params.dataIndex];
            }
          },
          textStyle: {
            align: "left",
          },
        },
        xAxis: [
          {
            type: "value",
            axisLabel: {
              margin: 10,
              color: "#fff",
              formatter: function (val) {
                return val + "";
              },
              textStyle: {
                fontSize: props.fontSize,
              },
            },
            min: 0,
            max: max, // 计算最大值
            interval: max / 5, //  平均分为5份
            splitNumber: 5,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                width: 1,
                opacity: 0.3,
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            axisLabel: {
              show: false,
            },
            min: 0,
            max: max, // 计算最大值
            interval: max / 10, //  平均分为5份
            splitNumber: 10,
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                color: "#D8D8D8",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,
            //  boundaryGap:true,
            axisLabel: {
              formatter: (value, index) => {
                if (value.length >= 12) {
                  value = value.slice(0, 12) + `\n` + value.slice(12);
                }
                if (value.length >= 26) {
                  value = value.slice(0, 26) + `\n` + value.slice(26);
                }
                return value;
              },
              textStyle: {
                color: "#fff",
                fontSize: props.fontSize,
                align: "right",
                lineHeight: 18,
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                width: 1,
                opacity: 0.3,
              },
            },
            data: getmydmc,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: props.fontSize,
              },
              formatter: function (value) {
                return value + props.unit;
              },
            },
            data: getmyd,
          },
        ],
        // dataZoom: [
        //   {
        //     type: "inside",
        //     show: true,
        //     height: 15,
        //     start: 1,
        //     end: 100,
        //     orient: "vertical",
        //     zlevel: 66,
        //   },
        // ],
        series: [
          {
            name: "值",
            type: "bar",
            // zlevel: 1,
            xAxisIndex: 0,
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 5, 5, 0],
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: props.color[0], // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: props.color[1], // 100% 处的颜色
                    },
                  ],
                },
              },
            },
            barWidth: props.barWidth,
            data: getmyd,
            z: 0,
          },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#022539",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 2,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [2, props.barWidth],
            symbolPosition: "start",
            symbolOffset: [-1, 0],
            data: getmydzd,
            z: 66,
            animationEasing: "elasticOut",
          },
          {
            name: "背景",
            type: "bar",
            barWidth: props.barWidth,
            barGap: "-100%",
            xAxisIndex: 1,
            data: getmydzd,
            itemStyle: {
              normal: {
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(24,144,255,0.3)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(99,180,255,0.3)", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
            z: 0,
          },
          {
            // 外边框
            type: "pictorialBar",
            symbol: "rect",
            itemStyle: {
              normal: {
                color: "none",
              },
            },
            // label: {
            //   normal: {
            //     formatter: (params) => {
            //       return "{f|  " + params.data + "}";
            //     },
            //     rich: {
            //       f: {
            //         color: "#ccfff4",
            //         fontSize: "22",
            //       },
            //     },
            //     position: 0,
            //     padding: [0, 0, 0, -10],
            //     show: true,
            //   },
            // },
            data: getmyd,
            z: 77,
            animationEasing: "elasticOut",
          },
        ],
      };

      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      chartInstance = echarts.init(state.echartref);
      chartInstance.showLoading(showLoading());
      f_echartInit(chartInstance);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>